<template>
  <div class="content-wrap">
    <div class="left-wrap" v-if="dataList.length">
      <div class="left-title-wrap">
        <div class="title-logo"></div>
        <div class="left-title">{{ showLeftTitle() }}</div>
      </div>
      <div class="day-list" ref="dayListDiv">
        <div class="day-line" :style="leftLineStyle"></div>

        <div class="day-wrap" v-for="(item, index) in dataList" :key="index">
          <div class="day-title">
            <div v-if="index === 0" class="line-white">
              <div class="day-dot"></div>
            </div>
            <div v-if="index > 0" class="day-dot"></div>
            {{ item.dateString }}
          </div>
          <div class="day-subtitle">{{ returnDayTitle(index) }}</div>
          <!-- 开始遍历cell -->
          <div
            :class="
              cellItem.selected
                ? 'video-cell video-cell-select'
                : 'video-cell video-cell-unselect'
            "
            @click="clickCell(cellItem)"
            v-for="(cellItem, cellIndex) in item.schedules"
            :key="cellIndex"
          >
            <div class="icon"></div>
            <div class="title">
              {{ cellItem.title }}
            </div>
            <div class="subtitle">
              {{ returnSubTitle(cellItem) }}
            </div>
          </div>
        </div>

        <div class="time-line-end" v-if="dataList.length">
          <div class="day-dot"></div>
          <div class="end-title">END</div>
        </div>
      </div>
    </div>
    <div class="right-wrap" v-if="selectVideo">
      <div class="video-title">{{ selectVideo.title }}</div>
      <div class="video-subtitle">
        {{ returnSubTitle(selectVideo) }}
      </div>
      <div class="video-player-wrap">
        <video
          ref="videoPlay"
          controls
          class="video-player"
          :src="selectVideo.videoUrl"
        ></video>
      </div>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      leftLineStyle: "height:200px",
      dataList: [],
      selectVideo: null
    };
  },
  computed: {
    ...mapState(["lang"])
  },
  mounted() {
    this.handleGetScheduleList();
  },
  watch: {
    lang() {
      this.handleGetScheduleList();
    }
  },
  methods: {
    ...mapMutations(["changeLang", "isShowLogin"]),
    showLeftTitle() {
      var title = this.$t("vr.schedule");
      return title.toUpperCase();
    },
    returnSubTitle(cellItem) {
      if (cellItem.company && cellItem.company.length) {
        return cellItem.expert + " | " + cellItem.company;
      }
      return cellItem.expert;
    },
    returnDayTitle(index) {
      var title = "";
      if (index === 0) {
        title = this.$t("vr.scheduleDay1");
      } else if (index === 1) {
        title = this.$t("vr.scheduleDay2");
      } else if (index === 2) {
        title = this.$t("vr.scheduleDay3");
      }
      return title;
    },
    clickCell(item) {
      console.log(item.title);
      this.selectVideo = item;

      this.dataList.map(item => {
        item.schedules.map(object => {
          if (object == this.selectVideo) {
            console.log(object.id, "true");
            object.selected = true;
          } else {
            object.selected = false;
            console.log(object.id, "false");
          }
        });
      });

      this.$nextTick(() => {
        this.$refs.videoPlay.load(this.selectVideo.videoUrl);
      });
    },
    getFormatDate(time) {
      var date = new Date(time * 1000);
      var YY = date.getFullYear();
      var MM =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

      return MM + "/" + DD + "/" + YY;
    },
    async handleGetScheduleList() {
      if (this.$refs.videoPlay) {
        this.$refs.videoPlay.pause();
      }
      let isLogin = sessionStorage.getItem("vrToken");
      if (!isLogin) {
        this.isShowLogin("show");
        return;
      }
      const params = {};
      const loading = this.$loading();
      const res = await api.getScheduleList(params, this.lang);

      this.dataList = res.data;

      loading.close();

      for (var i = 0; i < this.dataList.length; i++) {
        var item = this.dataList[i];
        //格式化日期
        item.dateString = this.getFormatDate(item.date);

        //默认选中第一个

        item.schedules.map((object, index) => {
          if (index === 0) {
            if (i === 0) {
              object.selected = true;
            }
            this.selectVideo = object;
          } else {
            object.selected = false;
          }
        });
      }

      this.$nextTick(() => {
        if (this.$refs.dayListDiv) {
          let height = this.$refs.dayListDiv.offsetHeight;
          this.leftLineStyle = "height:" + height + "px;";
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content-wrap {
  width: 1190px;
  height: auto;
  min-height: 600px;
  // background-color: #888888;
  margin: 0 auto;
  display: flex;
  .left-wrap {
    width: 330px;
    height: auto;
    // overflow: scroll;
    // background-color: #678123;
    .left-title-wrap {
      width: 100%;
      height: 33px;
      // background-color: #ff00ff;
      margin-top: 40px;
      display: flex;
      align-items: center;
      .title-logo {
        width: 27px;
        height: 27px;
        background: url("../../../../assets/imgs/schedule-menu.png") no-repeat;
        background-size: cover;
      }
      .left-title {
        width: 131px;
        height: 33px;
        font-size: 24px;
        font-weight: 600;
        color: #555555;
        line-height: 33px;
        background-color: #ffffff;
        margin-left: 10px;
      }
      .left-title:first-letter {
        color: #ff3265;
      }
    }
    .day-list {
      width: 100%;
      // height: auto;
      max-height: 700px;
      overflow-y: scroll;
      overflow-x: hidden;
      margin-left: 7.5px;
      // background-color: #909312;
      .day-line {
        width: 1px;
        height: 100%;
        // height: 50%;
        background-color: #d8d8d8;
        position: absolute;
        margin-left: 6px;
        z-index: -100;
      }
      .day-wrap {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        // background-color: #ff0000;

        .day-title {
          width: 270px;
          height: 30px;
          line-height: 30px;
          font-size: 24px;
          font-weight: 600;
          color: #555555;
          display: flex;
          // background-color: #ff00ff;
          .line-white {
            width: 13px;
            height: 22px;
            // margin-top: 9px;
            margin-right: 17px;
            background-color: #ffffff;
            .day-dot {
              width: 13px;
              height: 13px;
              background: #d8d8d8;
              border-radius: 8px;
              margin-top: 9px;
            }
          }
          .day-dot {
            width: 13px;
            height: 13px;
            background: #d8d8d8;
            border-radius: 8px;
            margin-top: 9px;
            margin-right: 17px;
          }
        }
        .day-subtitle {
          margin-left: 30px;
          width: 270px;
          height: 30px;
          font-size: 20px;
          font-weight: 600;
          color: #555555;
          line-height: 28px;
          margin-top: 3px;
          margin-bottom: 15px;
        }
        .video-cell-select {
          background-color: rgb(255, 84, 132);
          .icon {
            width: 7px;
            height: 12px;
            background: #ff5484;
            margin-left: 10px;
            background: url("../../../../assets/imgs/arrow-white.png") no-repeat;
            background-size: cover;
          }
          .title {
            width: auto;
            height: auto;
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            line-height: 22px;
            margin-left: 25px;
            margin-top: -17px;
            margin-right: 5px;
          }
          .subtitle {
            width: auto;
            height: auto;
            font-size: 9px;
            font-weight: 400;
            color: #ffffff;
            line-height: 13px;
            margin-left: 25px;
            margin-top: 5px;
            margin-right: 5px;
          }
        }
        .video-cell-unselect {
          background: rgba($color: #d8d8d8, $alpha: 0.37);
          .icon {
            width: 7px;
            height: 12px;
            background: #ff5484;
            margin-left: 10px;
            background: url("../../../../assets/imgs/arrow.png") no-repeat;
            background-size: cover;
          }
          .title {
            width: auto;
            height: auto;
            font-size: 16px;
            font-weight: 600;
            color: #555555;
            line-height: 22px;
            margin-left: 25px;
            margin-top: -17px;
            margin-right: 5px;
          }
          .subtitle {
            width: auto;
            height: auto;
            font-size: 9px;
            font-weight: 400;
            color: #aeaeae;
            line-height: 13px;
            margin-left: 25px;
            margin-top: 5px;
            margin-right: 5px;
          }
        }
        .video-cell {
          width: auto;
          height: auto;
          min-height: 50px;
          border-radius: 4px;
          margin-left: 30px;
          margin-right: 10px;
          margin-bottom: 15px;
          padding-top: 10px;
          padding-bottom: 10px;
        }
      }

      .time-line-end {
        width: 280px;
        height: 30px;
        background-color: #ffffff;
        display: flex;
        // align-items: flex-start;

        .day-dot {
          width: 13px;
          height: 13px;
          background: #d8d8d8;
          border-radius: 8px;
          // margin-top: 9px;
          margin-right: 17px;
        }
        .end-title {
          width: 205px;
          height: 28px;
          font-size: 12px;
          font-weight: 400;
          color: #555555;
          line-height: 17px;
        }
      }
    }
  }
  .right-wrap {
    width: 820px;
    height: auto;
    margin-left: 50px;
    margin-top: 40px;
    // background-color: #ffeeff;
    .video-title {
      margin-top: 40px;
      width: 100%;
      height: auto;
      font-size: 28px;
      font-weight: 400;
      color: #414141;
      line-height: 40px;
      // -webkit-text-stroke: 1px #979797;
      text-stroke: 1px #979797;
    }
    .video-subtitle {
      margin-top: 5px;
      width: 100%;
      height: 17px;
      font-size: 12px;
      font-weight: 400;
      color: #aeaeae;
      line-height: 17px;
    }
    .video-player-wrap {
      width: 816px;
      height: 459px;
      margin-top: 30px;
      margin-right: 0px;
      // background-color: #333333;
      .video-player {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
